<!DOCTYPE html>
<html>
	<head>
		<link href="/static/input.css" rel="stylesheet" type="text/css" />
		<link href="/static/datetimepicker.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="/static/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="/static/datetimepicker.js"></script>
		<script type="text/javascript" src="/static/uploadPreview.js"></script>
		<script type="text/javascript" src="/static/uploadPreview.min.js"></script>


	</head>
	<body>
		<h1>Upload New Product!</h1>
			<div class="main">
				<form method="post" enctype="multipart/form-data" action="/input">
					<div class="inputThumbnail">
						<img id="ImgPr" width="150" height="120" style="position:absolute" />
						{{inputForm.Thumbnail}}
						{% if inputForm.thumbnail.errors	%}
							<span class="thumbnailDanger">
	                			{% for error in inputForm.Thumbnail.errors %}
	                				{{ error }}
	                			{% endfor %}
	                		</span>
						{%endif%}
					</div>

					<div class="inputForm">
						<lable>Name:</lable>
						{{inputForm.Name}}
						{% if inputForm.Name.errors	%}
							<span class="nameDanger">
                			{% for error in inputForm.Name.errors %}
                				{{ error }}
                			{% endfor %}
              				</span>
              				
						{%endif%}
					</div>

					

					<div class="inputForm">
						<lable>Description:</lable>
						{{inputForm.Description}}
						{% if inputForm.Description.errors	%}
							<span class="descriptionDanger">
                				{% for error in inputForm.Description.errors %}
                					{{ error }}
                				{% endfor %}
                			</span>
						{%endif%}

					</div>

					<div class="inputForm">
						<lable>Sale:</lable>
						{{inputForm.OnSaleTime}}
						{% if inputForm.OnSaleTime.errors	%}
							<span class="onSaleTimeDanger">
               					{% for error in inputForm.OnSaleTime.errors %}
               						{{ error }}
           						{% endfor %}
               				 </span>
						{%endif%}
					</div>

					<div class="inputForm">
						<lable style="display: block;">Datail:</lable>
						{{inputForm.Detail}}
						{% if inputForm.Detail.errors	%}
							<span class="detailDanger">
               					{% for error in inputForm.Detail.errors %}
               						{{ error }}
           						{% endfor %}
                			</span>
						{%endif%}
					</div>

					<div class="inputForm">
						<input type="submit" value="submit" id="submit" />
						<button type="button" class="cancelInput">Cancel</button>
					</div>
				</form>
		</div>

		<script type="text/javascript">
			$(document).ready(function(){
            $("#thumbnailInput").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });

            	$('#nameInput').attr('placeholder','Most 16 words...');
            	$('#descriptionInput').attr('placeholder','Most 32 words...');
            	$('#detailInput').attr('placeholder','Most 500 words...');

	 			$('.cancelInput').click(function(){
					$(".productInput").val("");
				});

	 			$('#onSaleTime').datetimepicker({
				      format:"Y-m-d H:m",      
				});
				$('#onSaleTime').datetimepicker();

				$('#detailInput').click(function() {
					$('#detailInput').val("");
				});
				// $("#thumbnailInput").uploadPreview({ width: 90, height: 110, imgDiv: "#thumbnailInput"}); 
	  		});
		</script>
	</body>
</html>
